<!DOCTYPE html>
<html lang="en">

<head>
    <!--    引入vue-->
    <!--    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>-->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <!--初识vue
        1。想让vue工作   必须创建一个vue实例 且传入一个可配置对象
        2，app容器 符合htmll规范   只不过混入了一些特殊vue语法
        3。app 里面代码被称为 vue模版
        4.vue实例和容器是一一对应的
        5。实际开发中只有一个vue 实例    并且配合组件使用
        6。{{xxx}}中的xxx  只能写js表达式 并且可以自动读取data中的数据
        7。data中的数据发生改变 页面中用到该数据的地方也会发生改变-->

    <div id="app">
        <h1>hello {{name}}</h1>
    </div>

    <script>
        //创建vue实力
        new Vue({
            el: "#app", //指定当前vue实例为那个容器， 值通常为css选择器字符串
            data: {
                name: "111"
            }

        })
    </script>
</body>

</html>